<template>
  <div class="Structure">
    <div class="firstLevel">
      <div class="firstLevel-title">一级部门</div>
      <div class="firstLevel-content">
        <div class="firstLevel-content-box" @click="toPersonnelFirst(item)" v-for="(item,i) in firstLevel" :key="i" :style="randomRgb()">{{item}}</div>
      </div>
    </div>
    <div class="secondLevel">
      <div class="secondLevel-title">二级部门</div>
      <div class="secondLevel-content">
        <div class="secondLevel-content-box" @click="toPersonnelSecond(item)" v-for="(item,i) in secondLevel" :key="i" :style="randomRgb()">{{item}}</div>
      </div>
    </div>
    <div class="thirdLevel">
      <div class="thirdLevel-title">三级部门</div>
      <div class="thirdLevel-content">
        <div class="thirdLevel-content-box" @click="toPersonnelThird(item)" v-for="(item,i) in thirdLevel" :key="i" :style="randomRgb()">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'Structure',
    data () {
      return {
        firstLevel: [],
        secondLevel: [],
        thirdLevel: []
      }
    },
    mounted () {
      // 在此发起axios请求三次，分别拿到一二三级部门的数据数组，将拿到的数据存入data
      for(let i = 0; i < 3; i++){
        this.$axios({
          url:`http://132.232.110.185/personnelManagement/department/showDepartmentFirst/${i}`,
          method: 'GET'
        }).then(
        response => {
          if(i == 0){
            this.firstLevel = response.data.data
          }else if(i == 1){
            this.secondLevel = response.data.data
          }else{
            this.thirdLevel = response.data.data
          }
        },
        error => {
          console.log(error)
        })
      }
    },
    methods: {
      randomRgb() {
        let R = Math.floor(Math.random() * 130+110);
        let G = Math.floor(Math.random() * 130+110);
        let B = Math.floor(Math.random() * 130+110);
        return {
          background: 'rgb(' + R + ',' + G + ',' + B + ')'
          };
      },
      toPersonnelFirst(DName){
        this.$router.push({
          name: 'Personnel',
          params:{
            DName
          }
        })
      },
      toPersonnelSecond(DName){
        this.$router.push({
          name: 'Personnel',
          params:{
            DName
          }
        })
      },
      toPersonnelThird(DName){
        this.$router.push({
          name: 'Personnel',
          params:{
            DName
          }
        })
      }
    }
  }
</script>

<style scoped>
  .Structure{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 50px;
  }
  .firstLevel,.secondLevel,.thirdLevel{
    width: 31%;
  }
  .firstLevel-title,.secondLevel-title,.thirdLevel-title{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: gray;
  }
  .firstLevel-content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .secondLevel-content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .thirdLevel-content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .firstLevel-content-box{
    width: 48%;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin-top: 20px;
    border-radius: 5px;
  }
  .secondLevel-content-box{
    width: 48%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin-top: 20px;
    border-radius: 5px;
  }
  .thirdLevel-content-box{
    width: 48%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin-top: 20px;
    border-radius: 5px;
  }
</style>